<template>
  <div>
    <!--顶部-->
    <div>
      <van-row class="row">
        <van-col span="4">
          <van-icon name="arrow-left" @click="reback" />
        </van-col>
        <van-col span="16" style="text-align: center; font-size: 14px">
          采购单详情
        </van-col>
      </van-row>
    </div>

    <!--内容-->
    <div class="content">
      <!--头部-->
      <div class="header">
        <div style="display:flex">
        <div v-if="list.auditStatus == 1">未审核</div>
        <div v-else-if="list.auditStatus == 2">已审核</div>
        <div v-else-if="list.auditStatus == 3">已拒绝</div>
        <span class="status">反审核</span>
        </div>
        
        <div style="font-size: 14px">单据编号：{{ list.code }}</div>
      </div>

      <div class="item">
        <!--采购单详情-->
        <div class="title">
          <span>采购单详情</span>
          <span style="color:red;font-size:14px" v-if="list.auditStatus == 1"> 未审核 </span>
          <span style="color:red;font-size:14px" v-if="list.auditStatus == 2"> 已审核 </span>
          <span style="color:red;font-size:14px" v-if="list.auditStatus == 3"> 已拒绝 </span>
        </div>
        <!--采购单列表-->
        <div class="itemvalue">
          <div class="puritem">
            <div class="lable">单据日期</div>
            <div class="value">{{ list.billDate }}</div>
          </div>
          <div class="puritem">
            <div class="lable">供应商</div>
            <div class="value">{{ list.supplierName }}</div>
          </div>
          <div class="puritem">
            <div class="lable">购货金额</div>
            <div class="value">{{ list.buyMoney }}</div>
          </div>
          <div class="puritem">
            <div class="lable">优惠金额</div>
            <div class="value">{{ list.money }}</div>
          </div>
          <div class="puritem">
            <div class="lable">已付款</div>
            <div class="value">{{ list.pay }}</div>
          </div>
          <div class="puritem">
            <div class="lable">付款状态</div>
            <div class="value" v-if="list.status == 1">待付款</div>
            <div class="value" v-else-if="list.status == 2">部分付款</div>
            <div class="value" v-else-if="list.status == 3">已付款</div>
          </div>
          <div class="puritem">
            <div class="lable">制单人</div>
            <div class="value">{{ list.prepared }}</div>
          </div>
          <div class="puritem">
            <div class="lable">审核人</div>
            <div class="value">{{ list.auditor }}</div>
          </div>
        </div>
      </div>

      <!--采购商品-->
      <div class="title" style="background-color:#fff;">
        <span>采购商品</span>
        <span style="font-size:14px">合计{{ num }}件</span>
      </div>
      <template v-for="pd in list.purchaseDetailList" :key="pd.id">
        <div class="item">
          <!--采购商品信息-->
          <div class="itemname">
            <div>{{ pd.goodsname }}</div>
          </div>
          <div class="itemvalue">
            <div class="puritem">
              <div class="lable">采购单价</div>
              <div class="value">￥{{ pd.price }}</div>
            </div>
            <div class="puritem">
              <div class="lable">数量</div>
              <div class="value">￥{{ pd.num }}</div>
            </div>
            <div class="puritem">
              <div class="lable">采购金额</div>
              <div class="value">￥{{ pd.money }}</div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!--底部-->
    <div class="footer-a">
      <span class="btn-b">修改</span>
      <span class="btn-b">反审核</span>
    </div>
  </div>
</template>

<script setup>
import { Col as VanCol, Row as VanRow, Icon as VanIcon } from "vant";
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted,computed } from "vue";
import { queryPurchaseDetail } from "@/api/purchase.js";
//路由实例
const router = useRouter();
const route = useRoute();
let reback = () => {
  router.back();
};
//商品数量
const num = ref(0)
//采购单详情列表
const list = ref([]);

//采购单详情方法
let init = async () => {
  let res = await queryPurchaseDetail(route.query.id);
  if (res.code == 200) {
    list.value = res.data;
    num.value=list.value.purchaseDetailList.length
  }

};

onMounted(() => {
  init();
});
</script>

<style scope>
* {
  margin: 0;
  padding: 0;
}
.content {
  width: 7.5rem;
  background-color: #F6F7F9;
  margin-bottom: 1rem;
}

.header {
  height: 2.5rem;
  background-color: #0099ff;
  color: #fff;
  font-weight: bold;
  line-height: 0.7rem;
  padding: 0.5rem 0 0 1rem;
  box-sizing: border-box;
}
.item {
  width: 7.5rem;
}
.title {
  width: 7.5rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 20px;
  color: #666;
}
.itemname {
  width: 6.8rem;
  margin: 0.3rem auto;
  margin-bottom: 0.18rem;
  height: 0.6rem;
  line-height: 0.3rem;
  font-size: 14px;
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.itemvalue {
  width: 6.8rem;
  margin: auto;
  margin-bottom: 0.4rem;
}
.puritem {
  display: flex;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 16px;
  border-bottom: 1px solid #fff;
}
.lable {
  text-align: center;
}
.value {
  margin-left: 0.1rem;
  color: #666;
}
.footer-a {
  width: 7.5rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 16px;
  color: red;
  background-color: #F2F2F2;
  position: fixed;
  bottom: 0;
  padding: 0 0.2rem;
  box-sizing: border-box;
  text-align: right;
}
.btn-b{
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  margin: auto 0;
  margin-right: 0.2rem;
  border: 1px solid red;
  border-radius: 0.1rem;
  color: red;
  padding: 0.06rem 0.15rem;
  font-size: 14px;
}
.status{
  border: 1px solid red;
  border-radius: 0.1rem;
  color: red;
  font-size: 14px;
  font-weight: normal;
  padding: 0 0.1rem;
  margin-top: 0.1rem;
  margin-left: 0.3rem;
  height: 0.5rem;
  line-height: 0.5rem;
}
</style>
